<template>
  <div class="page_horizontal_poster">
    <van-nav-bar
      title="横版海报"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="ellipsis" size="23" @click=" show = true"/>
      </template>
    </van-nav-bar>

    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />

    <div ref="horizontal_poster_image" id="horizontal_poster_image" class="horizontal_poster" :style="{backgroundImage:`url(${loginImage})`,height: 'calc(100vh - 50px)'}">

        <qrcode-vue
          class="qr_code_h"
          :value="need_linkUrl_h"
          level="H"
        ></qrcode-vue>
    </div>

  </div>
</template>


<script>
import QrcodeVue from 'qrcode.vue';
import {mapGetters} from 'vuex';
import {base_url} from '../../constants/comUtils';
import {toScreenShotAndDownload} from '../../utils/comTools';

export default {
  name:'horizontalPoster',
  data(){
    return{
      linkUrl_h: base_url,
      show: false,
      slogin:true,
      loginImage:require('../../assets/horizontal_poster.jpg'),
      actions: [
        { id: '1', name: '使用说明' },
        { id: '2', name: '保存到手机' },
        { id: '3', name: '打印名片' },
        { id: '4', name: '打印贴纸' },
        { id: '5', name: '打印传单' },
        { id: '6', name: '打印海报' },
        { id: '7', name: '切换海报标语'}
      ],
    }
  },
  components: {
    QrcodeVue,
  },

  created() {

  },
  computed: {
    ...mapGetters(['allUserInfo']),

    need_linkUrl_h(){
      // console.log(this.linkUrl_h)
      // console.log(this.allUserInfo)
      // return false
      let res
      if (this.$route.query.urlStr){
        // console.log('参数', this.$route.query.urlStr)
        res = this.$route.query.urlStr;
      } else {
        const {account, ids, company_id='', p=2 , certification_state, g = 2, company_certification_state}  = this.allUserInfo
        // 更新链接
        res = this.linkUrl_h + '?' + `rpId=${ids}&gId=${company_id}&p=${certification_state}&g=${company_certification_state}&st=H&account=${this.$Base64.encode(account)}`
      }
      return res
    },
  },
  methods:{
    onSelect(item) {
      let _self = this
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item.id === '2'){
        toScreenShotAndDownload(this.$refs.horizontal_poster_image);
      }
      if(item.id === "7"){

        if(_self.slogin == false){
          _self.loginImage=require(`../../assets/horizontal_poster.jpg`)
          _self.slogin = true
        }else{
          _self.loginImage=require(`../../assets/22.png`)
          _self.slogin = false
        }
        return
      }

      this.$router.push({
        name: 'horizontalPosterDetail',
        params: {
          item: JSON.stringify(item)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  .page_horizontal_poster{
    width: 100%;
    .horizontal_poster{
      vertical-align: bottom;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      background-image: url('../../assets/horizontal_poster.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .qr_code_h{
        display: inline-block !important;
        position: absolute !important;
        z-index: 666 !important;
        top: 60%;
        left: 6%;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 198px;
        height: 198px;
       /deep/ canvas{
          width: 100%!important;
          height: 100%!important;
        }
      }
      .tip{
        position: absolute !important;
        z-index: 999 !important;
        color: #FFFFFF;
        text-align: center;
        top: 72%;
        font-weight: bolder;
        // font-size: 18px;
        transform: rotate(90deg);
        right: 68%;
        font-size: 17px;
      }
      .tips{
        position: absolute !important;
        z-index: 999 !important;
        color: #FFFFFF;
        text-align: center;
        top: 72%;
        font-weight: bolder;
        // font-size: 18px;
        transform: rotate(90deg);
        // right: 68%;
        top: 74%;
        width: 230px;
        right: 57%;
        font-size: 17px;
      }
    }
  }
</style>
